<div class="modal-header">
    <h4 class="modal-title">
        <span ng-if="!defaultTemplateMode">{{ "文档策略" | translate}}</span>
        <span ng-if="defaultTemplateMode && !customTemplateMode">{{ "保护模版" | translate}}</span>
        <span ng-if="defaultTemplateMode && customTemplateMode">{{ "编辑保护模版" | translate}}</span>
        <button type="button" class="close hide-share-plugin" ng-click="cancel()">&times;</button>
    </h4>
</div>
<style>
    .cDrm-permission-modal .modal-header,.cDrm-permission-modal .modal-body,.cDrm-permission-modal .modal-footer{

    }
    .cDrm-permission-container .user-operate-part{
        /*padding: 15px;*/
    }
    .add-enterprise-btn{
        padding:8px 12px;
    }
    .new-user.active{
        background-color: #8bd7f9;
    }
    .cDrm-permission-container .m-t-8{
        margin-top: 8px;
    }
    .cDrm-permission-container .btn{
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
    .user-list-area{
        padding-left: 15px;
    }
    .user-list-area ul{
        border: 1px solid #eee;
        height: 100%;
        overflow: auto;
        padding: 0;
    }
    .user-list-area .btn{
        width: 100%;
    }
    .icon-question{
        font-size: 14px;
        color: #4d95fb;
    }
    .user-permissions{
        /*padding-left: 15px;*/
        height: 300px;
        overflow: auto;
    }
    .group-warp.disabled {
        color: #c5c5c5;
        background-color: #fff;
        cursor: not-allowed;
        pointer-events: none !important;
    }
    #share-new-email::-ms-clear , #the-link::-ms-clear {
        display:none;
    }
    .user-name{
        display: inline-block;
        max-width: 38%;
        font-weight: 600;
    }
    .user-email{
        max-width: 58%;
        display: inline-block;
    }
    tr td{
        height: 30px;
    }
    .new-user{
        padding: 4px 6px;
        margin-top: 2px;
        margin-left: 6px;
        background: #eeeeee;
        line-height: 24px;
        height: 32px;
    }
    .new-user i.fa{
        margin-top: 7px;
        margin-left: 10px;
    }
    .new-user-info{
        height: 24px;
        line-height: 24px;
    }
    .new-user-list span{
        display: inline-block;
        vertical-align: middle;
    }
    .new-user-list{
        display: block;
        max-height: 120px;
        overflow: auto;
    }
    .new-user-info{
        display: inline-block;
        max-width: 400px;
    }
    .user-input{
        /*margin-top: 4px;*/
        display: inline-block;
        /*vertical-align: middle;*/
        background: none;
        border: 0;
        font-family: arial,sans-serif;
        font-size: 13px;
        height: 24px;
        outline: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 6px 0px 0 6px;
        position: relative;
        resize: none;
        width: 100%;
    }
    .feedback-ctrl{
        margin-top: 5px;
    }
    .cDrm-permission-container .new-user-list-container{
        background: white;border: 1px solid #ccc;
        border-radius: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        min-height: 34px;padding: 4px 2px 4px 2px;
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
    .caret-container{
        width: 16px;
        display: inline-block;
        /*background: #e6e6e6;*/
        border: 1px solid #bdbdbd;
        text-align: center;
        margin-left: 5px;
    }
    .cloud-reading-shared-modal.modal .caret{
        margin-left: 0;
    }
    #the-link[readonly]{
        background: #ffffff;
    }
    @media screen and (max-width: 500px){
        .user-avatar{
            display: none;
        }
    }
    .new-user{
        font-size: 12px;
    }
    .new-user-list-container{
        background: white;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        min-height: 34px;
        padding: 4px 2px 4px 2px;
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
    .user-permissions label{
        width: 100%;
    }
    .user-permissions select{
        width: 100%;
        background-color: #fff;
        height: 30px;
        font-weight: 400;
    }
    .tab-pane input{
        width: 60%;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
    .tab-pane .uib-time input{
        width: 50px;
    }
    fieldset.scheduler-border {
        border: 1px solid #eee;
        padding: 15px;
        -webkit-box-shadow:  0px 0px 0px 0px #000;
        box-shadow:  0px 0px 0px 0px #000;
    }
    .p-d-l-10{
        padding-left: 10px;
    }
    legend.scheduler-border {
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        width: auto;
        padding: 0 10px;
        border-bottom: none;
        color: #797885;
        margin-bottom: 6px;
    }
    .permission-bg{
        background: #eee;
        padding: 10px;
    }
    .cDrm-permission-container{
        padding-bottom: 0;
    }
    .color-blue{
        color: #10adf3;
    }
    .cDrm-permission-container .nav-tabs{
        border-bottom: none;
    }
    .cDrm-permission-container .nav-tabs>li.active>a{
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 0;
        background-color: #10adf3;
        border-color: #10adf3;
        color: #fff;
        margin-right: 0;
    }
    .cDrm-permission-container .nav-tabs>li>a{
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid #a6a6a6;
        border-radius: 0;
        color: #797979;
        margin-right: 0;
    }
    .perm-detail-container{
        padding: 15px;
    }
    .form-control.ng-invalid:focus,.form-control.ng-invalid{
        border-color: #b31e00;
    }
</style>
<div class="modal-body cDrm-permission-container">

    <div class="loading-for-link text-center" ng-show="waitingForLink">
        <i class="fa fa-spinner fa-pulse"></i>
    </div>
    <div ng-show="defaultTemplateMode && !customTemplateMode">
        <fieldset class="scheduler-border">
            <legend class="scheduler-border">
                <span ng-show="!serverHasTemplate">默认保护模版</span>
                <span ng-show="serverHasTemplate">已有的保护模版</span>
            </legend>
            <div class="row p-d-l-10">
                <div class="col-xs-2">
                    用户：
                </div>
                <div class="col-xs-10 ">
                    <span class="dropdown" on-toggle="toggled(open)" ng-if="serverHasTemplate">
                      <span id="simple-dropdown" class="dropdown-toggle" type="button" data-toggle="dropdown">
                        {{ curChooseUser.name }} <span class="caret"></span>
                      </span>
                      <ul class="dropdown-menu right-click-pop-up" aria-labelledby="simple-dropdown">
                        <li ng-repeat="user in users" ng-click="chooseUser(user)">
                          <a href>{{user.name}}</a>
                        </li>
                      </ul>
                    </span>
                    <div class="user-list" ng-if="!serverHasTemplate">
                        <div ng-repeat="user in users" ng-click="chooseUser(user)">
                            {{ user.name }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="row m-t-10 p-d-l-10">
                <div class="col-xs-2">
                    权限：
                </div>
                <div class="col-xs-10">
                    <div class="permission-bg">
                        <label>
                            <input type="checkbox" checked disabled>
                            <span>阅读</span>
                        </label>
                        <label class="m-l-5">
                            <input type="checkbox" ng-disabled="serverHasTemplate" ng-model="curChooseUser.permData.copyCode" ng-checked="curChooseUser.permData.copyCode!==0" ng-true-value="210" ng-false-value="0">
                            <span >复制</span>
                        </label>
                        <label class="m-l-5">
                            <input type="checkbox" ng-disabled="serverHasTemplate" ng-model="curChooseUser.permData.editCode" ng-checked="curChooseUser.permData.editCode!==0" ng-true-value="128" ng-false-value="0">
                            <span >编辑</span>
                        </label>
                        <label class="m-l-5">
                            <input type="checkbox" ng-disabled="serverHasTemplate" ng-model="curChooseUser.permData.printCode" ng-checked="curChooseUser.permData.printCode!==0" ng-true-value="804" ng-false-value="0">
                            <span >打印</span>
                        </label>
                    </div>
                </div>
            </div>
        </fieldset>
        <div class="m-t-15">
            <a class="color-blue" ng-click="customizeProtectTemplate()" ng-show="!serverHasTemplate">自定义保护模版</a>
            <a class="color-blue" ng-click="toggleTemplateDetail()" ng-show="serverHasTemplate">查看详细保护模版></a>
            <div ng-show="showDetail">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="p-d-15 p-b-0">
                            <p>权限：</p>
                            <div class="p-d-l-r-15">
                                <p>复制：{{ codeMap[curChooseUser.permData.copyCode||0] }}</p>
                                <p>编辑：{{ codeMap[curChooseUser.permData.editCode||0] }}</p>
                                <p>打印：{{ codeMap[curChooseUser.permData.printCode||0] }}</p>
                            </div>
                        </div>
                        <div class="p-d-15 p-t-0" ng-show="curChooseUser.online!=0 && (curChooseUser.onlineDays || curChooseUser.onlineDate)">
                            <p>内容过期时间：</p>
                            <div class="p-d-l-r-15">
                                <p>{{ curChooseUser.onlineDays || curChooseUser.onlineDate }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div ng-show="!defaultTemplateMode || customTemplateMode">
        <div class="user-operate-part">
            <h5>添加用户：</h5>
            <div class="row user-list-area">
                <input-email-cdrm
                            users="users"
                            new-email="newEmail"
                            placeholder="placeholder"
                            choose-user="chooseUser"
                            cur-choose-user="curChooseUser"
                            chose-users-arr="choseUsersArr"
                            file-cdoc-id="fileCdocId"
                ></input-email-cdrm>
                <!---->
                <!--<ul class="col-xs-8">-->
                    <!--<li ng-repeat="user in users" ng-click="chooseUser(user,$event)" ng-class="{'active':user.selected}">-->
                        <!--<span>-->
                            <!--<input type="checkbox" ng-checked="user.selected" ng-click="chooseUserByCheckbox(user,$event)">-->
                            <!--<span>{{ user.name }}</span>-->
                        <!--</span>-->
                    <!--</li>-->
                <!--</ul>-->
            </div>
        </div>
        <div class="user-permissions" ng-show="curChooseUser!==null && curChooseUser.isValidInput">
            <!--<h5>Right For {{ curChooseUser.name }} <span class="icon-question"><i tooltip-placement="bottom" uib-tooltip="{{ 'read_right_brief' | translate }}" class="fa fa-question-circle"></i></span></h5>-->
            <h5>设置用户权限：</h5>
            <label for="copy" class="row">
                <div class="col-xs-4">{{ 'Copying' | translate }}：</div>
                <div class="col-xs-8">
                    <select name="copy" id="copy" ng-model="curChooseUser.permData.copyCode" convert-to-number>
                        <option value="0">{{ 'None' | translate }}</option>
                        <option value="200">{{ 'Text access for the visually impaired' | translate }}</option>
                        <option value="210">{{ 'Any' | translate }}</option>
                    </select>
                </div>
            </label>
            <label for="edit" class="row">
                <div class="col-xs-4">{{ 'Editing' | translate }}：</div>
                <div class="col-xs-8">
                    <select name="edit" id="edit" ng-model="curChooseUser.permData.editCode" convert-to-number>
                        <option value="0">{{ 'None' | translate }}</option>
                        <option value="400">{{ 'Inserting, deleting, and rotating pages' | translate }}</option>
                        <option value="100">{{ 'Filling in forms and signing existing signature fields' | translate }}</option>
                        <option value="120">{{ 'Commenting, filling form, signing existing signature fields' | translate }}</option>
                        <option value="128">{{ 'Any except extracting pages' | translate }}</option>
                    </select>
                </div>
            </label>

            <br>
            <label for="print" class="row">
                <div class="col-xs-4">{{ 'Printing' | translate }}：</div>
                <div class="col-xs-8">
                    <select name="print" id="print" ng-model="curChooseUser.permData.printCode" convert-to-number>
                        <option value="0">{{ 'None' | translate }}</option>
                        <option value="4">{{ 'Low Resolution' | translate }}</option>
                        <option value="804">{{ 'High Resolution' | translate }}</option>
                    </select>
                </div>
            </label>

            <h5>{{ 'Content expiration' | translate }}</h5>
            <form name="outerForm" class="tab-form-demo">
                <uib-tabset active="curChooseUser.online">
                    <uib-tab index="0" ng-click="changeOnlineType(0)" heading="{{ 'Never' | translate }}">

                    </uib-tab>
                    <uib-tab index="2" ng-click="changeOnlineType(2)" heading="{{ 'By date' | translate }}">
                        <p class="m-t-8">{{ 'Content expiration date' | translate }}：</p>
                        <!--<div class="row" style="margin-right: 0;">-->
                            <!--<div class="col-md-6">-->
                                <!--<p class="input-group">-->
                                    <!--<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats"/>-->
                                    <!--<span class="input-group-btn">-->
                                        <!--<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>-->
                                    <!--</span>-->
                                <!--</p>-->
                            <!--</div>-->
                            <!--<div class="col-md-6">-->
                                <!--<div uib-timepicker show-spinners="false" ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></div>-->
                            <!--</div>-->
                        <!--</div>-->
                        <input class="form-control" type="text" ng-model="curChooseUser.onlineDate" placeholder="e.g. 2020-01-01 09:00:00">
                    </uib-tab>
                    <uib-tab index="1" ng-click="changeOnlineType(1)" heading="{{ 'By days' | translate }}">
                        <p class="m-t-8">{{ 'Number of days the content is valid' | translate }}：</p>
                        <input class="form-control" type="text" ng-model="curChooseUser.onlineDays" placeholder="e.g. 7">
                    </uib-tab>
                </uib-tabset>
            </form>

            <!--<div class="group-warp">-->
                <!--<div class="warp-header">-->

                <!--</div>-->
                <!--<div class="warp-body">-->
                    <!--<div class="">-->
                        <!--<button class="btn btn-white active" type="button" name="contentExipration" data-flag="permission">Never</button>-->
                        <!--<button class="btn btn-white" type="button" name="contentExipration" data-flag="permission">By date</button>-->
                        <!--<button class="btn btn-white" type="button" name="contentExipration" data-flag="permission">By days</button>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="group-warp disabled">-->
                <!--<div class="warp-header">Content expiration date: </div>-->
                <!--<div class="warp-body">-->
                    <!--<input class="form-control" type="" value="" id="expirationDate" disabled="">-->
                    <!--<input class="form-control hide" type="text" id="onlineDate-val" disabled="" style="">-->
                <!--</div>-->
            <!--</div>-->
        </div>
    </div>

</div>
<div class="modal-footer cDrm-permission-footer">
    <div ng-if="!justShowTemplate">
        <label class="pull-left">
            <input type="checkbox" ng-model="saveTemplate.checked">保存为保护策略模版
        </label>
        <button class="btn btn-right-aside b-radius-0" ng-class="{'disabled':loading}" ng-click="ok()" type="button">

            <span ng-if="defaultTemplateMode">使用当前保护模版</span>
            <span ng-if="!defaultTemplateMode">保护</span>
            <i ng-show="loading" class="fa fa-pulse fa-spinner"></i>
        </button>
        <button ng-if="defaultTemplateMode && !customTemplateMode" class="btn btn-right-aside b-radius-0" ng-click="customizeProtectTemplate()" type="button">编辑模版
        </button>
        <button class="btn btn-default b-radius-0" type="button" ng-click="cancel()">取消
        </button>
    </div>
    <div ng-if="justShowTemplate">
        <div ng-if="!customTemplateMode">
            <button class="btn btn-right-aside b-radius-0" ng-click="customizeProtectTemplate()" type="button">编辑模版
            </button>
            <button class="btn btn-default b-radius-0" type="button" ng-click="cancel()">关闭
            </button>
        </div>
        <div ng-if="customTemplateMode">
            <button class="btn btn-right-aside b-radius-0" ng-click="ok()" type="button">保存
            </button>
            <button class="btn btn-default b-radius-0" type="button" ng-click="cancel()">取消
            </button>
        </div>

    </div>
</div>